@let processedDatabuckets = processedDatabuckets$ | async;
@let activeDatabucket = activeDatabucket$ | async;
@let activeEnvironment = activeEnvironment$ | async;
@let databucketList = databucketList$ | async;
@let settings = settings$ | async;

@if (activeEnvironment) {
  <div class="databuckets-menu d-flex flex-column h-100">
    <div class="d-flex w-100 py-2 align-items-center">
      <div>
        <button
          type="button"
          class="btn btn-link"
          (click)="addDatabucket()"
          ngbTooltip="Add data"
        >
          <app-svg icon="add_box"></app-svg>
        </button>
      </div>
      <div class="flex-grow-1">
        <app-filter
          filterName="databuckets"
          [focusableInput]="focusableInputs.DATABUCKET_FILTER"
        ></app-filter>
      </div>
    </div>

    @if (databucketList) {
      <ul class="nav flex-column menu-list h-100">
        <li
          class="nav-item"
          *ngFor="let databucket of databucketList; trackBy: trackByUuid"
          appDraggable
          appDropzone
          dragContainer="databuckets"
          [dragEnabled]="true"
          dragParentId="root"
          [dragIsContainer]="false"
          [dragId]="databucket.uuid"
          (dropped)="reorganizeDatabuckets($event)"
        >
          <a
            class="nav-link d-flex pe-0 hover-parent"
            [ngClass]="{
              active: activeDatabucket?.uuid === databucket.uuid
            }"
            appScrollWhenActive
            (click)="selectDatabucket(databucket.uuid)"
          >
            <!-- mw0 is important for proper text truncation -->
            <div class="d-flex flex-column mw0">
              @if (settings) {
                <div
                  class="nav-link-label databucket-path"
                  [ngClass]="{
                    'text-truncate': settings.truncateRouteName,
                    'text-break': !settings.truncateRouteName
                  }"
                >
                  {{ databucket.name }}
                </div>
              }
              <div
                class="nav-link-subtitle mt-1 d-flex align-items-center svg-text-align"
              >
                <span
                  class="me-2"
                  ngbTooltip="Data ID (can be used within data and dataRaw templating helpers). Click to copy."
                  (click)="copyToClipboard(databucket.id, $event)"
                  >ID:&nbsp;{{ databucket.id }}</span
                >
                <app-svg
                  class="me-2 databucket-processed-status"
                  [ngClass]="{
                    'text-muted':
                      !processedDatabuckets[databucket.uuid]?.parsed,
                    'text-success':
                      processedDatabuckets[databucket.uuid]?.parsed &&
                      processedDatabuckets[databucket.uuid]?.validJson,
                    'text-warning':
                      processedDatabuckets[databucket.uuid]?.parsed &&
                      !processedDatabuckets[databucket.uuid]?.validJson
                  }"
                  icon="data"
                  size="14"
                  [ngbTooltip]="
                    processedDatabuckets[databucket.uuid]?.parsed
                      ? processedDatabuckets[databucket.uuid]?.validJson
                        ? 'Generated content is valid JSON'
                        : 'Generated content is not valid JSON (will be stored as a string)'
                      : processedDatabuckets[databucket.uuid]
                        ? 'Not parsed yet (request helpers detected)'
                        : 'Not parsed yet (server is not running)'
                  "
                ></app-svg>

                <span class="text-truncate">{{
                  databucket.documentation
                }}</span>
              </div>
            </div>
            <div class="ms-auto ps-2 d-flex align-items-start">
              <app-dropdown-menu
                [idPrefix]="'databucket-' + databucket.uuid"
                [items]="dropdownMenuItems"
                [payload]="{
                  databucketUuid: databucket.uuid
                }"
                [iconFaded]="true"
                [noYPadding]="true"
              ></app-dropdown-menu>
            </div>
          </a>
        </li>
      </ul>
    }

    <div
      appResizeColumn
      type="secondary"
      [minWidth]="menuSize"
      [maxWidthFactor]="0.25"
      class="resize-column"
    ></div>
  </div>
}
